<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">
 <h:body>
     
   <composite:interface displayName="Componente que se muestra como un nodo que representara a una unidad organica" >
      <composite:attribute name="id" required="true" />
      <composite:attribute name="entity" required="true" />
       <composite:attribute name="mBean" required="true" />
      <composite:attribute name="styleClass"  required="false" />
      <composite:attribute name="image"  required="false" default="#{resource['images:user_common.png']}" />
      <composite:attribute name="tipo"  required="false" default="nodo" />
      <composite:attribute name="root"  required="false" default="#{null}" />
      <composite:attribute name="update"  required="false" />
      <composite:attribute name="updateExplorar"  required="false" />
      <composite:attribute name="oncomplete"  required="false" />
       <composite:attribute name="oncompleteExplorar"  required="false" />
       <composite:attribute name="onstartExplorar"  required="false" />
     </composite:interface>
 
   <composite:implementation>
   
   <h:form id="form1">
   <ui:fragment rendered="#{cc.attrs['tipo']}=='card'">

   <h:panelGrid id="content" columns="1" styleClass="#{cc.attrs['styleClass']}" onmouseover="toggle(this.id,1);" onmouseout="toggle(this.id,0);" >
	<h:outputText id="title"   value="#{cc.attrs.entity['nombreUnidad']}" styleClass="title" />
    <h:panelGrid columns="2">
					<h:panelGroup layout="block" styleClass="image"  >
					<h:graphicImage value="#{cc.attrs.image}"/>
					</h:panelGroup>
					<h:panelGrid styleClass="#{cc.attrs['styleClass']} detalle">
					<h:outputLabel value="#{cc.attrs.entity['siglas']}" />
	</h:panelGrid>
	<h:panelGrid columns="4"  id="menu_opciones" style="display:none" styleClass="menuOpciones">
	<p:commandLink  action="#{cc.attrs.mBean.seleccionarUO}" update="#{cc.attrs.update}" onclick="event.stopPropagation();" oncomplete="#{cc.attrs.oncomplete}">
					<f:setPropertyActionListener target="#{cc.attrs.mBean.uoSelected}" value="#{cc.attrs.entity}" />
					<span class="ui-icon ui-icon-pencil" title="Editar"></span>
	</p:commandLink>  
	<p:commandLink  action="#{cc.attrs.mBean.seleccionarUO}" update="#{cc.attrs.update}" onclick="event.stopPropagation();" oncomplete="#{cc.attrs.oncomplete}">
					<f:setPropertyActionListener target="#{cc.attrs.mBean.uoSelected}" value="#{cc.attrs.entity}" />
					<span class="ui-icon ui-icon-document-b" title="Nuevo"></span>
	</p:commandLink>
	
	<p:commandLink  action="#{cc.attrs.mBean.seleccionarUO}" update="#{cc.attrs.update}" onclick="event.stopPropagation();" oncomplete="#{cc.attrs.oncomplete}">
					<f:setPropertyActionListener target="#{cc.attrs.mBean.uoSelected}" value="#{cc.attrs.entity}" />
					<span class="ui-icon ui-icon-search" title="Editar"></span>
	</p:commandLink>  
	</h:panelGrid>			
	</h:panelGrid>  
	
  	</h:panelGrid>
  	
  	</ui:fragment>
  	<ui:fragment rendered="#{cc.attrs['tipo']=='nodo'}" >
  	<h:panelGrid width="100%"  id="content1" columns="1" styleClass="#{cc.attrs['styleClass']}" onmouseover="toggle(this.id,1);" onmouseout="toggle(this.id,0);" >
  	<h:outputText value="#{cc.attrs.entity['nombreUnidad']}" styleClass="nodoTitle" />
  <h:panelGrid columns="6"  id="menu_opciones1" style="display:none" styleClass="menuOpciones">
	<p:commandLink  action="#{cc.attrs.mBean.seleccionarUO}" update="#{cc.attrs.update}" onclick="stopProg(event);" oncomplete="#{cc.attrs.oncomplete}">
					<f:setPropertyActionListener target="#{cc.attrs.mBean.uoSelected}" value="#{cc.attrs.entity}" />
					<span class="ui-icon ui-icon-pencil" title="Editar"></span>
	</p:commandLink>  
	<p:commandLink  action="#{cc.attrs.mBean.nuevo}" update="#{cc.attrs.update}" onclick="stopProg(event);" oncomplete="#{cc.attrs.oncomplete}">
					<f:setPropertyActionListener target="#{cc.attrs.mBean.uoSelected}" value="#{cc.attrs.entity}" />
					<span class="ui-icon ui-icon-document-b" title="Nueva U.O Dependiente"></span>
	</p:commandLink>
		
	<p:commandLink  action="#{cc.attrs.mBean.explorarUO}" update="#{cc.attrs.updateExplorar}" onclick="stopProg(event);" oncomplete="#{cc.attrs.oncompleteExplorar}" onstart="#{cc.attrs.onstartExplorar}">
					<f:setPropertyActionListener target="#{cc.attrs.mBean.uoSelected}" value="#{cc.attrs.entity}" />
					<span class="ui-icon ui-icon-search" title="Explorar"></span>
	</p:commandLink>
	<p:commandLink  action="#{cc.attrs.mBean.subirNivel}" update="#{cc.attrs.updateExplorar}"   onclick="stopProg(event);" immediate="true" oncomplete="#{cc.attrs.oncompleteExplorar}" onstart="#{cc.attrs.onstartExplorar}" rendered="#{not empty cc.attrs.root}">
					<f:setPropertyActionListener target="#{cc.attrs.mBean.uoSelected}" value="#{cc.attrs.entity}" />
					<span class="ui-icon ui-icon-arrowthick-1-n" title="Ir nivel superior"></span>
	</p:commandLink> 

	</h:panelGrid>		
   	</h:panelGrid>
  	</ui:fragment>
  	 </h:form>
    
 	<script type= "text/javascript">
	//<![CDATA[


function toggle(element,flag){
	var el=element.replace('content','menu_opciones');
	//alert(el);
	var idEl=somefunction(el);
	if(flag==0){
	if($("#"+idEl).is(":visible"))
	$("#"+idEl).hide();
	}
	else{
		if($("#"+idEl).is(":visible")==false)
			$("#"+idEl).show();
	//$("#"+idEl).show( "slide", { direction: "down" });	
	}
	//$(el).val("");
}
function somefunction(text) {
	 
    return text.replace(/\:/g,'\\:');
}
function stopProg(e){
	
if(window.event){
	window.event.cancelBubble=true;
}
else
	e.stopPropagation();
}

//]]>
</script>
    
  </composite:implementation>
 
 
 
 </h:body>
 
</html>